<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>axios+vue</title>
  </head>

  <body>
    <div id="app">
        <input type="button" value="获取新的笑话" @click="getJoke">
       <p>  原： {{aJoke}} </p>      
    </div>

    <!-- 引入axios, 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


  <script>
    new Vue({
      el:"#app",
      data:{
          aJoke:"一个笑话，请你哈哈哈"
      },
      methods: {
          //axios从网络中get一个笑话。
          getJoke:function(){
              console.log(this.aJoke +"------初始");
              // axios 回调函数中的 this 已经改变。把 this 保存起来.
              var sThis = this;
              axios.get("http://localhost:8101/api/joke").then(
                  function(response){                    
                      console.log(response);
                      console.log(response.data); //服务器返回来的数据在response.data里面。
                      console.log(this.aJoke +"axios里this.aJoke"); //this.aJoke变成了undefined。
                      console.log(sThis.aJoke +"axios里sThis.aJoke");//成功获取到了data中aJoke数据
                      sThis.aJoke = response.data; //把服务器返回来的数据直接设置给data中的aJoke了。使得aJoke的值会变了。

                  },function(err){
                      console.log(err);
                  }
              )
          }
      },


    })
  </script>

    <!-- data是这个Vue实例中使用到的数据。用什么就写什么 -->
  </body>
</html>
